<template>
  <div class="chart">
    <!--    <div id="valueTrend" style="height:30vh;width: 100%"></div>-->
    <value-trend :spcData=spcData></value-trend>
    <div id="rangeTrend" style="height:30vh;width: 100%"></div>
  </div>
</template>

<script>
//控制图组件
import { getVmParentByName } from '@/utils/util'
import ValueTrend from '@/components/spc/ValueTrend.vue'
import { dateFormat } from '@/utils/date'

let echarts = require('echarts')

export default {
  name: 'ControlChart',
  components: {
    ValueTrend
  },
  props: {
    spcData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      data: [],
      valueTrendChart: {},
      valueTrendOption: {},
      rangeTrendChart: {},
      rangeTrendOption: {},
      base: +new Date(2023, 5, 1),
      rangeValues: [],
      controlValues: [],
      line: [],
      lsl: 0,
      usl: 0,
      cpk: 0,
      uclR: 0,
      clR: 0,
      lclR: 0,
      uclX: 0,
      lclX: 0
    }
  },
  watch: {
    spcData(val) {
      this.createData(val)
    }
  },
  created() {
    console.log('初始化')
  },
  mounted() {
    console.log('加载')
    //this.createData();
    this.chartInit()
    window.addEventListener('resize', this.handleWindowResize)
  },
  methods: {
    createData(val) {
      let rangeValues = []
      let controlValues = []
      val.rangeValues.map(item => {
        rangeValues.push([item.name + '', item.value, item.id, item.color])
      })
      val.controlValues.map(item => {
        controlValues.push([item.name + '', item.value, item.id, item.color])
      })
      this.line = [{
        name: 'uclX',
        value: val.uclX
      }, {
        name: 'lclX',
        value: val.lclX
      }
      ]
      this.rangeValues = rangeValues
      this.controlValues = controlValues
      this.uclR = val.uclR
      this.clR = val.clR
      this.lclR = val.lclR
      this.uclX = val.uclX
      this.lclX = val.lclX
      this.cpk = val.cpk
      this.ppk = val.ppk
      if (val.usl) {
        this.line.push({
          name: 'usl',
          value: val.usl
        })
      }
      if (val.lsl) {
        this.line.push({
          name: 'lsl',
          value: val.lsl
        })
      }
      this.usl = val.usl
      this.lsl = val.lsl
      this.initValueTrendChart()
      this.initRangeTrendChart()
    },
    chartInit() {
      this.valueTrendChart = echarts.init(document.getElementById('valueTrend'))
      this.rangeTrendChart = echarts.init(document.getElementById('rangeTrend'))
    },
    /**
     * 初始化控制图
     */
    initValueTrendChart() {
      let that = this
      let lsl
      if (that.lsl) {
        lsl = that.lsl.toFixed(4)
      }
      let usl
      if (that.usl) {
        usl = that.usl.toFixed(4)
      }
      let lclX = that.lclX
      let uclX = that.uclX
      let cpk = that.cpk
      let ppk = that.ppk
      let startLength = 100 - (100 / that.controlValues.length * 100)
      // 指定图表的配置项和数据
      this.valueTrendOption = {
        tooltip: {
          trigger: 'axis',
          //transitionDuration: 0,  //鼠标移入抖动
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          position: 'left'
        },
        title: {
          left: 'left',
          text: 'control chart',
          subtext: 'CPK: ' + cpk + ' PPK:' + ppk,
          subtextStyle: {
            fontSize: 20,
            align: 'center'
          }
        },
        grid: {
          left: '4%',
          right: '4%'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          },
          min: function(e) {
            if (lsl) {
              return lsl
            } else {
              return (lclX - lclX * 0.1).toFixed(4)
            }
          },
          max: function(e) {
            if (usl) {
              return usl
            } else {
              return (uclX + uclX * 0.1).toFixed(4)
            }
          }
        },

        dataZoom: [
          {
            type: 'inside',
            start: startLength,
            end: 100
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: 'Data',
            type: 'line',
            data: this.controlValues,
            itemStyle: {
              normal: {
                color: function(seriesIndex) { //拐点颜色回调
                  return seriesIndex.data[3]
                },
                lineStyle: {
                  color: 'red'
                }
              }
            },
            markLine: {
              symbol: 'none',//去掉箭头
              silent: true,
              data: this.line.map(function(item) {
                if (item.name === 'usl' || item.name === 'lsl') {
                  return {
                    yAxis: item.value.toFixed(4),
                    lineStyle: {
                      width: 2,
                      color: 'red',
                      type: 'dotted'
                    }
                  }
                } else {
                  return {
                    yAxis: item.value.toFixed(4),
                    lineStyle: {
                      width: 2,
                      color: 'black',
                      type: 'dotted'
                    }
                  }
                }
              })
            }
          }

        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.valueTrendOption && this.valueTrendChart.setOption(this.valueTrendOption)
      const myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    },
    /**
     * 初始化极差图
     */
    initRangeTrendChart() {
      let that = this
      let lclR = that.lclR
      let uclR = that.uclR
      let clR = that.clR
      let startLength = 100 - (100 / that.rangeValues.length * 100)
      console.log('百分比')
      console.log(startLength)
      // 指定图表的配置项和数据
      this.rangeTrendOption = {
        animation: false,
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,  //鼠标移入抖动
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          position: 'left'
        },
        title: {
          left: 'left',
          text: 'range chart'
        },
        grid: {
          left: '3%',
          right: '3%'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          },
          min: lclR,
          max: (uclR + uclR * 0.3).toFixed(3)
        },

        dataZoom: [
          {
            type: 'inside',
            start: startLength,
            end: 100
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            data: this.rangeValues,
            connectNulls: true,
            itemStyle: {
              normal: {
                color: function(seriesIndex) { //拐点颜色回调
                  return seriesIndex.data[3]
                },
                lineStyle: {
                  color: 'green'
                }
              }
            },
            markLine: {
              symbol: 'none',//去掉箭头
              silent: true,
              data: [
                {
                  yAxis: uclR.toFixed(4),
                  lineStyle: {
                    width: 2,
                    color: 'red',
                    type: 'dotted'
                  }
                },
                {
                  yAxis: lclR.toFixed(4),
                  lineStyle: {
                    width: 2,
                    color: 'red',
                    type: 'dotted'
                  }
                },
                {
                  yAxis: clR.toFixed(4),
                  lineStyle: {
                    width: 2,
                    color: 'blue',
                    type: 'dotted'
                  }
                }
              ]

            }
          }

        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.rangeTrendOption && this.rangeTrendChart.setOption(this.rangeTrendOption)
      const myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    },
    handleWindowResize() {
      this.rangeTrendChart.resize()
      this.valueTrendChart.resize()
    }
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>